﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default2.aspx.vb" Inherits="ProjetoDeTestes.Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        /* A few IE bug fixes */
        *
        {
            margin: 0;
            padding: 0;
        }
        * html ul ul li a
        {
            height: 100%;
        }
        * html ul li a
        {
            height: 100%;
        }
        * html ul ul li
        {
            margin-bottom: -1px;
        }
        
        body
        {
            padding-left: 10em;
            font-family: Arial, Helvetica, sans-serif;
        }
        #theMenu
        {
            width: 200px;
            height: 350px;
            margin: 30px 0;
            padding: 0;
        }
        
        /* Some list and link styling */
        ul li
        {
            width: 200px;
        }
        ul ul li
        {
            border-left: 25px solid #69c;
            padding: 0;
            width: 175px;
            margin-bottom: 0;
        }
        ul ul li a
        {
            display: block;
            color: #000;
            padding: 3px 6px;
            font-size: small;
        }
        ul ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 8px;
            font-size: small;
        }
        /* For the xtra menu */
        ul ul ul li
        {
            border-left: none;
            border-bottom: 1px solid #eee;
            padding: 0;
            width: 175px;
            margin-bottom: 0;
        }
        ul ul ul li a
        {
            display: block;
            color: #000;
            padding: 3px 6px;
            font-size: small;
        }
        ul ul ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 8px;
            font-size: small;
        }
        
        
        li
        {
            list-style-type: none;
        }
        h2
        {
            margin-top: 1.5em;
        }
        
        /* Header links styling */
        h3.head a
        {
            color: #333;
            display: block;
            border-top: 1px solid #36a;
            border-right: 1px solid #36a;
            background: #ddd url(down.gif) no-repeat;
            background-position: 98% 50%;
            padding: 3px 6px;
        }
        h3.head a:hover
        {
            color: #000;
            background: #ccc url(down.gif) no-repeat;
            background-position: 98% 50%;
        }
        h3.selected a
        {
            background: #69c url(up.gif) no-repeat;
            background-position: 98% 50%;
            color: #fff;
            padding: 3px 6px;
        }
        h3.selected a:hover
        {
            background: #69c url(up.gif) no-repeat;
            background-position: 98% 50%;
            color: #36a;
        }
        
        /* Xtra Header links styling */
        h4.head a
        {
            color: #333;
            display: block;
            border-top: 1px solid #36a;
            border-right: 1px solid #36a;
            background: #eee url(down.gif) no-repeat;
            background-position: 98% 50%;
            padding: 3px 6px;
        }
        h4.head a:hover
        {
            color: #000;
            background: #ddd url(down.gif) no-repeat;
            background-position: 98% 50%;
        }
        h4.selected a
        {
            background: #6c9 url(up.gif) no-repeat;
            background-position: 98% 50%;
            color: #fff;
            padding: 3px 6px;
        }
        h4.selected a:hover
        {
            background: #6c9 url(up.gif) no-repeat;
            background-position: 98% 50%;
            color: #36a;
        }

    </style>
    <script type="text/javascript" src="http://blog.evaria.com/wp-content/themes/blogvaria/jquery/jquery.js"></script>
    <script type="text/javascript" src="http://blog.evaria.com/wp-content/themes/blogvaria/jquery/accordion.js"></script>
    <script type="text/javascript">
        jQuery().ready(function () {

            jQuery('.theMenu').Accordion({
                active: 'h3.selected',
                header: 'h3.head',
                alwaysOpen: false,
                animated: true,
                showSpeed: 400,
                hideSpeed: 800
            });
            jQuery('.xtraMenu').Accordion({
                active: 'h4.selected',
                header: 'h4.head',
                alwaysOpen: false,
                animated: true,
                showSpeed: 400,
                hideSpeed: 800
            });
        });	
    </script>
</head>
<body>
    <ul class="theMenu">
        <li>
            <h3 class="head">
                <a href="#">Title 1</a></h3>
            <ul>
                <li><a href="#">Content 1 1</a></li>
                <li><a href="#">Content 1 2</a></li>
                <li><a href="#">Content 1 3</a></li>
            </ul>
        </li>
        <li>
            <h3 class="head">
                <a href="#">Title 2</a></h3>
            <ul>
                <li>
                    <ul class="xtraMenu">
                        <li>
                            <h4 class="head">
                                <a href="#">Content xtra 2 1a</a></h4>
                            <ul>
                                <li><a href="#">Content 2 1 1</a></li>
                                <li><a href="#">Content 2 1 2</a></li>
                                <li><a href="#">Content 2 1 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <h4 class="head">
                                <a href="#">Content xtra 2 1b</a></h4>
                            <ul>
                                <li><a href="#">Content 2 2 1</a></li>
                                <li><a href="#">Content 2 2 2</a></li>
                                <li><a href="#">Content 2 2 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Content 2 2</a></li>
                <li><a href="#">Content 2 3</a></li>
            </ul>
        </li>
        <li>
            <h3 class="head">
                <a href="#">Title 3</a></h3>
            <ul>
                <li><a href="#">Content 3 1</a></li>
                <li><a href="#">Content 3 2</a></li>
                <li><a href="#">Content 3 3</a></li>
            </ul>
        </li>
        <li>
            <h3 class="head">
                <a href="#">Title 4</a></h3>
            <ul>
                <li><a href="#">Content 4 1</a></li>
                <li><a href="#">Content 4 2</a></li>
                <li><a href="#">Content 4 3</a></li>
            </ul>
        </li>
        <li>
            <h3 class="head">
                <a href="#">Title 5</a></h3>
            <ul>
                <li><a href="#">Content 5 1</a></li>
                <li><a href="#">Content 5 2</a></li>
                <li><a href="#">Content 5 3</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
